<template>
  <div>
      <button @click="back">返回</button>
    <div  v-if="article" class="article-body">
     <h2>{{article.title}}</h2>
     <div class="author-msg">
        <img :src="article.author.avatar_url" class="avatar">
        <span>{{article.author.loginname}}</span>
     </div>
     <div v-html="article.content">
         <div class="article-content" v-html="article.content"></div>
     </div>
     <hr>
     <h3>评论</h3>
     <div v-for="(item,index) in article.replies" :key="index" class="comment-item">
         <div class="comment-author">
<img :src="article.author.avatar_url"  class ="avatar">
<span>{{article.author.loginname}}</span>
<span>{{item.create_at |timeFilter}}</span>
         </div>
         <div class="comment-content" v-html="item.content"></div>
     </div>
  </div>
  <div v-else class="article-body">
        正在加载。。。。。。
  </div>
  
  </div>
</template>

<script>
export default {
  data() {
    return {
      article: null,
    };
  },
  created() {
    this.$axios
    
      .get(`https://cnodejs.org/api/v1/topic/${this.$route.query.id}`)
      .then((res) => {
        this.article = res.data.data;
      });
  },
  activated(){
window.scrollTo(0,0)
  },
  methods:{
back(){
    this.$router.back()
}
  },
};
</script >

<style scoped>
.article-body {
  width: 60%;
  margin: 10px auto;
  overflow: hidden;
}
.author-msg {
  display: flex;
  align-items: center;
}
.avatar{
    width:30px;
    height:30px;
    border-radius:50%;
    margin-right:10px;
}
.comment-item{
    padding:10px;
    border-bottom:1px solid red;

}
.comment-author{
    display:flex ;
    align-items:center;
     justify-content: space-between;
}
.comment-content{
    text-indent:20px;
    margin:10px 0;
}
.article-content >>> img{
width: 100%;
}
</style>